<template>
  <div ref="geoMapCon" class="w-full h-full" />
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  markRaw,
  nextTick
} from "vue";
import * as echarts from "echarts";
import beijingJson from "@/assets/maps/beijing.json";

const geoMapCon = ref();
const geoMapConInstance = ref();
const initGeoMapOption = ref({});
const geoCoordMap = {
  东城区: [116.41669, 39.93336], // 东城区
  西城区: [116.3665, 39.93149], // 西城区
  朝阳区: [116.48628, 39.94875], // 朝阳区
  海淀区: [116.29812, 39.95911], // 海淀区
  丰台区: [116.28631, 39.86319], // 丰台区
  石景山区: [116.22336, 39.90591], // 石景山区
  昌平区: [116.23145, 40.22071], // 昌平区
  大兴区: [116.34687, 39.72698], // 大兴区
  通州区: [116.65819, 39.90966], // 通州区
  顺义区: [116.65466, 40.13021], // 顺义区
  房山区: [116.14293, 39.74873], // 房山区
  门头沟区: [116.10138, 39.94044], // 门头沟区
  怀柔区: [116.63148, 40.31602], // 怀柔区
  平谷区: [117.12121, 40.14056], // 平谷区
  密云区: [116.84312, 40.37621], // 密云区
  延庆区: [115.97494, 40.45996], // 延庆区
  亦庄开发区: [116.49869, 39.70059] // 亦庄开发区（经济技术开发区）
};
const geoCityData = [
  { name: "东城区", value: { 产生量: 40, 收集量: 90 } },
  { name: "西城区", value: { 产生量: 40, 收集量: 90 } },
  { name: "朝阳区", value: { 产生量: 40, 收集量: 90 } },
  { name: "海淀区", value: { 产生量: 40, 收集量: 90 } },
  { name: "丰台区", value: { 产生量: 40, 收集量: 90 } },
  { name: "石景山区", value: { 产生量: 40, 收集量: 90 } },
  { name: "昌平区", value: { 产生量: 40, 收集量: 90 } },
  { name: "大兴区", value: { 产生量: 40, 收集量: 90 } },
  { name: "通州区", value: { 产生量: 40, 收集量: 90 } },
  { name: "顺义区", value: { 产生量: 40, 收集量: 90 } },
  { name: "房山区", value: { 产生量: 40, 收集量: 90 } },
  { name: "门头沟区", value: { 产生量: 40, 收集量: 90 } },
  { name: "怀柔区", value: { 产生量: 40, 收集量: 90 } },
  { name: "平谷区", value: { 产生量: 40, 收集量: 90 } },
  { name: "密云区", value: { 产生量: 40, 收集量: 90 } },
  { name: "延庆区", value: { 产生量: 40, 收集量: 90 } },
  { name: "亦庄开发区", value: { 产生量: 40, 收集量: 90 } }
];

const convertData = data => {
  let res = [];
  for (let i = 0; i < data.length; i++) {
    let geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      });
    }
  }
  return res;
};

initGeoMapOption.value = {
  // backgroundColor: '#03213D',
  animation: true,
  // 地图背景颜色
  tooltip: {
    trigger: "axis"
  },
  geo: [
    {
      map: "beijing",
      aspectScale: 0.9,
      roam: false, // 是否允许缩放
      zoom: 1, // 默认显示级别
      layoutSize: "100%",
      layoutCenter: ["50%", "45%"],
      show: true,
      // top: -10,
      viewControl: {
        autoRotate: true,
        distance: 50,
        center: [-12, -25, 0]
      },
      itemStyle: {
        // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
        color: "rgba(10, 133, 171, 0.2)",
        // opacity: 0.5,
        borderWidth: 1,
        borderColor: "#07dde2"
      },
      label: {
        show: true,
        textStyle: {
          color: "#ccc", // 地图初始化区域字体颜色
          fontSize: 14,
          fontWeight: "bold",
          opacity: 1,
          backgroundColor: "rgba(0,0,0,0)"
        },
        emphasis: {
          color: "#ffffff",
          show: true
        }
      },
      emphasis: {
        // 当鼠标放上去  地区区域是否显示名称
        label: {
          show: true,
          textStyle: {
            color: "#f9b207",
            fontSize: 12
          }
        },
        itemStyle: {
          color: "#ff7f00",
          opacity: 1
        }
      },
      // shading: 'lambert',
      light: {
        // 光照阴影
        main: {
          color: "rgba(0,0,0,0)", // 光照颜色
          intensity: 1.2, // 光照强度
          // shadowQuality: 'high', //阴影亮度
          shadow: false, // 是否显示阴影
          alpha: 55,
          beta: 10
        },
        ambient: {
          intensity: 0.3
        }
      },
      zlevel: 3,
      silent: true
    },
    {
      map: "beijing",
      aspectScale: 0.9,
      roam: false, // 是否允许缩放
      zoom: 1, // 默认显示级别
      layoutSize: "100%",
      layoutCenter: ["50%", "45%"],
      show: true,
      itemStyle: {
        borderColor: "rgba(192,245,249,0.4)",
        borderWidth: 2,
        shadowColor: "#a9eef1",
        shadowOffsetY: 0,
        shadowBlur: 120,
        areaColor: "rgba(51,108,162,0.1)"
      },
      zlevel: 2,
      silent: true
    },
    {
      map: "beijing",
      aspectScale: 0.9,
      roam: false, // 是否允许缩放
      zoom: 1, // 默认显示级别
      layoutSize: "100%",
      layoutCenter: ["51.5%", "46%"],
      show: false,
      itemStyle: {
        areaColor: "rgba(27,54,122,0.3)",
        borderColor: "rgba(169,238,241,0.5)",
        borderWidth: 1
      },
      zlevel: 1,
      silent: true
    }
  ],
  series: [
    {
      type: "scatter",
      coordinateSystem: "geo",
      symbol: "pin",
      symbolSize: 20,
      opacity: 1,
      itemStyle: {
        borderWidth: 0.5,
        borderColor: "#fff"
      },
      zlevel: 10,
      emphasis: {
        label: {
          show: true,
          position: "center",
          backgroundColor: "red",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            backgroundColor: "#55c6cb"
          },
          formatter: function (res) {
            console.log("res :>> ", res);
            return (
              "\n" +
              res.name +
              "   : 产生量:" +
              res.value[2]["产生量"] +
              "    收集量:" +
              res.value[2]["收集量"] +
              "\n"
            );
          }
        }
      },
      data: convertData(geoCityData).map(it => {
        return {
          // 数组新增2，代表z轴距离
          name: it.name,
          value: [it.value[0], it.value[1], it.value[2]],
          itemStyle: {
            normal: {
              color: "#f9b207", // 如果想颜色不一样 就换成这个，并且 在上面color数组中修改，添加想要的颜色，--colorF()
              areaColor: "#f9b207"
            }
          }
        };
      })
    },
    {
      type: "lines",
      coordinateSystem: "geo",
      effect: {
        // 尾迹线(动画线)
        show: true,
        trailWidth: 2, // 宽度
        trailOpacity: 0.5, // 透明度
        trailLength: 0.5, // 尾迹线长度
        constantSpeed: 20, // 速度
        period: 4 // 箭头指向速度，值越小速度越快
      },
      blendMode: "lighter",
      lineStyle: {
        // 参考线
        color: "#f9b207",
        width: 2,
        opacity: 0.05
      },
      z: 3,
      data: [
        [
          [116.41669, 39.93336],
          [116.48628, 39.94875]
        ],
        [
          [116.41669, 39.93336],
          [116.28631, 39.86319]
        ],
        [
          [116.41669, 39.93336],
          [116.23145, 40.22071]
        ],
        [
          [116.41669, 39.93336],
          [116.65819, 39.90966]
        ],
        [
          [116.41669, 39.93336],
          [116.14293, 39.74873]
        ],
        [
          [116.41669, 39.93336],
          [116.63148, 40.31602]
        ],
        [
          [116.41669, 39.93336],
          [116.84312, 40.37621]
        ],

        [
          [116.41669, 39.93336],
          [117.12121, 40.14056]
        ],
        [
          [116.41669, 39.93336],
          [116.10138, 39.94044]
        ],
        [
          [116.41669, 39.93336],
          [116.65466, 40.13021]
        ],
        [
          [116.41669, 39.93336],
          [116.34687, 39.72698]
        ],
        [
          [116.41669, 39.93336],
          [116.22336, 39.90591]
        ],
        [
          [116.41669, 39.93336],
          [115.97494, 40.45996]
        ]
      ]
    }
  ]
};

// 初始化图表
const initGeoMapChart = () => {
  echarts.registerMap("beijing", beijingJson);
  geoMapConInstance.value = markRaw(echarts.init(geoMapCon.value));
  geoMapConInstance.value.setOption(initGeoMapOption.value, true);
};

// 卸载前动作 -- 销毁图表 -- 避免内存泄漏
onBeforeUnmount(() => {
  geoMapConInstance.value.dispose();
});

// 挂载后动作 -- 初始化图表
onMounted(() => {
  nextTick(() => {
    initGeoMapChart();
    // 图表自适应
    window.addEventListener("resize", () => {
      geoMapConInstance.value.resize();
    });
  });
});

defineOptions({
  name: "GeoMap"
});
</script>
